<template>
  <u-popup v-model="car.show"
           :z-index='900'
           safe-area-inset-bottom
           mode='bottom'
           :custom-style='customStyle'>
    <scroll-view scroll-y>
      <view class="shop-car">
        <u-divider half-width="375">购物车</u-divider>
        <view class="clear"
              @click="handleClear">
          <u-icon name="trash-fill"></u-icon>清空
        </view>
        <Goods v-for="goods in shopcar"
               :key="goods.goods_id"
               :goods='goods'></Goods>
      </view>
    </scroll-view>
  </u-popup>
</template>

<script>
import eventBus from '@/common/eventbus.js'
import Goods from './goods.vue'
export default {
  components: { Goods },
  props: ['car', 'shopcar'], //显示状态、购物车数据
  data() {
    return {
      customStyle: {
        height: 'calc(100vh - 120rpx)',
      }, //设置样式让底部空出购物条距离
    }
  },
  methods: {
    // 清空购物车
    handleClear() {
      eventBus.$emit('clear-car')
    },
  },
}
</script>

<style lang="scss" scoped>
scroll-view {
  max-height: 60vh;
}
.shop-car {
  width: 100vw;
  padding: 30rpx;
}
.car-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.clear {
  width: 100%;
  text-align: right;
  color: #2979ff;
}
</style>